<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="../../assets/js/jquery-2.0.3.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/hammer.min.js"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="../../assets/ztree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script src="../../assets/js/dialog.js" type="text/javascript"></script>
    <script src="../../assets/js/jquery.cookie.js" type="text/javascript" ></script>
    <script src="../../assets/js/common.js" type="text/javascript"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../assets/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="../../assets/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="../../assets/css/zTreeStyle.css" rel="stylesheet" />
    <link href="../../assets/css/common.css" rel="stylesheet" />
</head>
<style type="text/css">

</style>
<script type="text/javascript">
    var html = "";
    var zTreeObj;
    var header = {"Authorization":"Bearer "+$.cookie("myToken")};
    var url = "/api/roleAuth/getAuthTree";
    var urls = "/api/roleAuth/getAuthTree?access_token="+$.cookie("myToken");
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        async: {
            enable: true,
            type: "GET",
            url: urls,
            dataFilter: ajaxDataFilter,
            autoParam: ["id"]
        },
        check: {
            enable: false
        }
    };
    var nodes = [
        {
            "id": 0,
            "name": "主页",
            "isParent": true,
            "nocheck": true,
            childern:[]
        }
    ];

    $(document).ready(function(){
        html = $("#addEditForm").html();
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
    });


    // 异步加载数据过滤器
    function ajaxDataFilter(treeId, parentNode, responseData) {
        console.info(responseData);
        return responseData;
    }

    function addEditNode(info) {
        var nodess = zTreeObj.getSelectedNodes();
        var title = "";
        var pid = null;
        if(nodess!=null&&nodess!=""){
            if(info=="add"){
                $("#ids").removeAttr("disabled");
                pid = nodess[0].id;
                title = "新增节点";
            }else if (info=="edit"){
                title = "修改节点";
                //如果是修改则先查询数据
                $.ajax({
                    url: "/api/roleAuth/getAuthById?access_token="+$.cookie("myToken"),
                    data: {id:nodess[0].id},
                    async: false,
                    type: "GET",
                    success: function(messages){
                        var data = messages.data;
                        $("#authCode").val(data.authCode);
                        $("#name").val(data.name);
                        $("#icon").val(data.icon);
                        $("#url").val(data.url);
                        $("#sort").val(data.sort);
                        $("#ids").val(data.id);
                        $("#type").val(data.type);
                        $("#status").val(data.status);
                        $("#method").val(data.method);
                        $("#description").val(data.description);
                        $("#ids").attr("disabled","disabled");
                        pid = data.pid;
                    },
                    dataType:"json"});
            }

            var elem = document.getElementById('addEditForm');
            dialog({
                title: title,
                content: elem,
                width: '50em',
                okValue: "确定",
                ok : function () {
                    if(!saveCheckInfo()){
                        return false;
                    }
                    saveNode(info, pid);
                    return true;

                },
                onremove: function () {
                    initInput();
                },
                cancelValue: '取消',
                cancel: function () {}
            }).showModal();
        }else {
            promptDail('请先选择一个节点!');
        }
    }
    
    function saveNode(info,id) {
        var url = "";
        var data = {};
        data["pid"] = id;
        data["id"] = $("#ids").val();
        data["authCode"] = $("#authCode").val();
        data["name"] = $("#name").val();
        data["icon"] = $("#icon").val();
        data["url"] = $("#url").val();
        data["sort"] = $("#sort").val();
        data["type"] = $("#type").val();
        data["method"] = $("#method").val();
        data["status"] = $("#status").val();
        data["description"] = $("#description").val();
        if (info == "edit") {
            url = "/roleAuth/updateAuth";
        } else {
            url = "/roleAuth/addAuth";
        }

        var result = myAjaxJSON(data, url, "POST");
        if(result.code=="200"){
            promptDail("保存成功！");
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
            return true;
        }else if(result.code!="5000") {
            promptDail("保存失败！");
            return false;
        }

    }

    //删除节点
    function delEditNode() {
        var nodess = zTreeObj.getSelectedNodes();
        if(nodess!=null&&nodess!=""){
            var ids = nodess[0].id;
            dialog({
                title: '提示信息',
                content: '确认删除数据!',
                okValue: '确定',
                ok: function () {
                    var options = {"id":ids};
                    var data = myAjax(options,"/roleAuth/deleteAuthById?access_token="+$.cookie("myToken"),"DELETE")
                    if (data.code=="200"){
                        okDail("删除成功!");
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
                    }else {
                        errorDail("删除失败!");
                    }
                }
            }).showModal();
        }else{
            promptDail('请先选择一个节点!');
        }
    }

    //失去焦点判断是否为空
    function onBlurValue(obj) {
        var info = $(obj).val();
        if(info!=null&&info!=""){
            $(obj).next().hide();
        }else {
            $(obj).next().show();
        }

    }

    //判断是否为空
    function saveCheckInfo(){
        var b = true;
        b = checkValue("name");
        b = checkValue("code");
        b = checkValue("ids");
        b = checkValue("url");
        b = checkValue("sort");

        return b;
    }
    
    function checkValue(infoId) {
        var b = true;
        var info = $("#"+infoId).val();
        if(info!=null&&info!=""){
            $("#"+infoId).next().hide();
        }else {
            $("#"+infoId).next().show();
            b = false;
        }

        return b;
    }
    
    function initInput() {
        $("#ids").val("");
        $("#authCode").val("");
        $("#name").val("");
        $("#icon").val("");
        $("#url").val("");
        $("#sort").val("");
        $("#type").val(0);
        $("#status").val(1);
        $("#description").val("");
    }
</script>
<body style="padding:5px;">
<div class="panel panel-default" style="min-height: 90%;">
    <div class="panel-heading">
        资源列表
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <div class="col-sm-1">
            <button class="glyphicon glyphicon-plus btn btn-primary " id="add_btn" onclick="addEditNode('add');return false;">新增</button>
        </div>
        <div class="col-sm-1">
            <button class="glyphicon glyphicon-pencil btn btn-info" id="edit_btn" onclick="addEditNode('edit');return false;">修改</button>
        </div>
        <div class="col-sm-1">
            <button class="	glyphicon glyphicon-minus btn btn-danger" id="delet_btn" onclick="delEditNode();return false;">删除</button>
        </div>

    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <ul id="treeDemo" class="ztree">

        </ul>
    </div>
</div>
<div id="addEditForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;">
        <form class="form-horizontal" id="nodeForm" role="form">
            <div class="form-group">
                <label class="col-sm-2 control-label">资源id<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" id="ids" name="ids" placeholder="资源编号" onBlur="onBlurValue(this)">
                    <span class="help-block" style="color: red; display: none;">请输入资源id</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">资源编号<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" id="authCode" name="authCode" placeholder="资源编号" onBlur="onBlurValue(this)">
                    <span class="help-block" style="color: red; display: none;">请输入资源编号</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">资源名称<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="name" name="name"  placeholder="资源名称" onBlur="onBlurValue(this)">
                    <span class="help-block" style="color: red; display: none;">请输入资源名称</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">图标</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="icon" name="icon"  placeholder="请输入图标名称" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">资源地址<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="url" name="url"  placeholder="请输入资源地址" onBlur="onBlurValue(this)"/>
                    <span class="help-block" style="color: red; display: none;">请输入资源地址</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">资源排序<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <input type="text" class="form-control"  id="sort" name="sort"  placeholder="资源排序" onBlur="onBlurValue(this)"
                           onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"/>
                    <span class="help-block" style="color: red; display: none;">请输入资源排序</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">权限类型<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="type" name="type" style="width: 30%">
                        <option value="0" >菜单</option>
                        <option value="1" >功能</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">状态<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="status" name="status" style="width: 30%">
                        <option value="1" >有效</option>
                        <option value="0" >禁用</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">方法<span style="color: red;">*</span></label>
                <div class="col-sm-7">
                    <select class="form-control" id="method" name="method" style="width: 30%">
                        <option value="GET" >GET</option>
                        <option value="POST" >POST</option>
                        <option value="PUT" >PUT</option>
                        <option value="DELETE" >DELETE</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">描述</label>
                <div class="col-sm-7">
                    <textarea class="form-control"  id="description" name="description"  placeholder="描述" ></textarea>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>